import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformDemo extends StatelessWidget{
  final a=1;
  static const b=0;
  @override
  Widget build(BuildContext context)  => Scaffold(
    appBar: AppBar(
      title: Text('变换'),
      centerTitle: true,
    ),
    // Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
    // 所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，
    // 因为这些是在布局阶段就确定的
    // RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
    // 但不同的是：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小
    body: ConstrainedBox(
      // 使Column水平方向铺满屏幕
      constraints: BoxConstraints(minWidth: double.infinity),
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.black,
            // 倾斜
            child: Transform(
              alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
              transform: Matrix4.skewY(0.3),
              child: Container(
                padding: EdgeInsets.all(10),
                color: Colors.deepOrange,
                child: Text('Apartment for rent!'),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 30),
            color: Colors.red,
            // 平移
            child: Transform.translate(
              offset: Offset(-20, -5),
              child: Text('Hello world!'),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.red,
            // 旋转
            child: Transform.rotate(
              angle: math.pi/2,
              child: Text('Hello world!'),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.red,
            // 缩放
            child: Transform.scale(
              scale: 1.5,
              child: Text('Hello world!'),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.red,
            // 旋转，位置和大小发生变化
            child: RotatedBox(
              quarterTurns: 1, //顺时针旋转90度(1/4圈)
              child: Text('Hello world!'),
            ),
          ),
        ],
      ),
    ),
  );

}